<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>向子组件中传递事件并在子组件中调用该事件</title>
    <style>
        .redColor {
            color: red;
        }
        .greenColor {
            color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>向子组件中传递事件并在子组件中调用该事件</h1>
        {{msg}}
        <hr>
        <h1 :class="fontColor">{{msg}}</h1>
        <user-list @edit-msg="changeMsg"></user-list>
    </div>
    <!-- 用户列表组件 -->
     <template id="userList">
         <div>
            <h1>用户列表</h1>
            <ul>
                <li v-for="user in users">
                    {{user.name}}
                </li>
            </ul>
            <button @click="editMsg">修改父组件msg的值</button>
         </div>
     </template>
</body>

</html>
<script type="module">
    import { } from './js/vue.js'
    const userList = {
        template: '#userList',
        data() {
            return {
                users: []
            }
        },
        methods: {
            editMsg(){
                console.log('修改父组件msg的值')
                this.$emit('edit-msg', '高职软件','greenColor')    // $emit() 发送自定义事件    第一个参数为事件名称，第二个参数为事件参数
            },
            getUsers() {
                this.users = [
                    { name: '张三' },
                    { name: '李四' },
                    { name: '王五' },
                ]
            }
        },
        mounted() {
            this.getUsers()
        }
    }
    let app = new Vue({
        el: '#app',
        data: {
            msg: 'haha',
            fontColor: 'redColor'
        },
        methods: {
            changeMsg(msg,color){
                this.msg = msg
                this.fontColor = color
            }
        },
        components: {
            userList
        },
    })
</script>